<script setup>
import { ref } from 'vue'
// import {  ConfigProvider } from 'ant-design-vue'
import { reactive } from 'vue'
// // import params from '@/core/config/index'
import DemoApi from '../api/DemoApi'
//const checked = ref(false)

import { defineAsyncComponent } from 'vue'
const ArticleList = defineAsyncComponent(() => import('@/components/ArticleList.vue'))
const show = ref(false)

//与app.vue一致
const colorState = reactive({
    primaryColor: '#25b864',
})

const onColorChange = (type, e) => {
    console.log(type, e.target.value, '颜色')
    Object.assign(colorState, {
        [type]: e.target.value,
    })
    // ConfigProvider.config({
    //     theme: colorState,
    // })
}
// 测试API调用

const showMessage = () => {
    DemoApi.doLogin().then(res => {
        alert(JSON.stringify(res))
    }).catch(err => {
        alert(JSON.stringify(err))
    })
}
const showMessage2 = () => {
    DemoApi.doLogin2().then(res => {
        alert(JSON.stringify(res))
    }).catch(err => {
        alert(JSON.stringify(err))
    })
}
const showMessage3 = () => {
    DemoApi.doSave().then(res => {
        alert(JSON.stringify(res))
    }).catch(err => {
        alert(JSON.stringify(err))
    })
}
/*********************************************
 *
 * https://www.pudn.com/news/6228c6349ddf223e1ad059bd.html
 * 生效：
 * 文档：需要引入替换当前项目引入样式文件为 CSS Variable 版本。
 * 引入：
  // main.js
 * import "ant-design-vue/dist/antd.variable.min.css";
 * 引入后在vite.config.中修改
 * AntDesignVueResolver({  importStyle: false })
 * 刷新： 此时主题就生效了。
 */

const files = import.meta.globEager('../views/*.vue')

// console.dir(JSON.stringify(files))
const modules = {}

for (const key in files) {
    console.info(key)
    if (Object.prototype.hasOwnProperty.call(files, key)) {
        modules[key.replace(/(\.\/|\.ts)/g, '')] = files[key].default
    }
}

</script>
<template>
  <a-card title="Default size card" style="width: 800px">
    <template #extra><a href="#">more</a></template>
    <a-row justify="center">
      <a-col>
        <input type="color" :value="colorState.primaryColor" @input="e => onColorChange('primaryColor', e)">
      </a-col>
    </a-row>
    <a-row>
      <a-col>
        Testing
      </a-col>
      <a-col>
        <a-button type="primary" @click="showMessage">Primary</a-button>
        <a-button type="primary" @click="showMessage2">Primary</a-button>
        <a-button type="primary" @click="showMessage3">Primary</a-button>
      </a-col>
      <a-col>
        <a-button>Default</a-button>
      </a-col>
      <a-col>
        <a-button type="dashed">Dashed</a-button>
      </a-col>
      <a-col>
        <a-button type="text">Text</a-button>
      </a-col>
      <a-col>
        <a-button type="link">Link</a-button>
      </a-col>
      <a-col>
        <a-button type="primary">HelloWorld</a-button>
      </a-col>
      <a-col>
        <div class="selecter"> Hello Word </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col class="redtext">
        config
      </a-col>
    </a-row>
    <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
    <a-card-grid style="width: 25%; text-align: center" :hoverable="false">Content</a-card-grid>
    <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
    <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
    <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
    <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
    <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
    <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
    <div>
      {{ modules }}
    </div>
    <div>
      <button @click="show = true"> Login </button>
      <Suspense v-if="show">
        <template #default>
          <ArticleList />
        </template>
        <template #fallback>
          <p> Loading... </p>
        </template>
      </Suspense>
    </div>
  </a-card>
</template>
<style lang="less" scoped>
.redtext {
  font-size: 26px;
  color: @link-color;
}
</style>